<template>
    <div class="my-edit page">
        <formHeader :title="'修改资料'"></formHeader>
        <div class="con" v-if="showEdit">
            <div class="form">

                <txt-input type="text" v-if="!tem.sync" v-model="tem.name" label="姓名" place-holder="名称"></txt-input>
                <txt-input v-model="tem.phone" type="number" label="手机号" place-holder="输入自己的手机号"></txt-input>
                <txt-input v-if="!$route.query.mobile" v-model="topPhone" type="number" label="分享人手机号" place-holder="手机号码"></txt-input>
                <txt-input  @clickCode="clickCode" v-model="tem.captcha" type="code" label="验证码"
                           place-holder="输入验证码"></txt-input>
                <!--                <txt-input v-model="changePaw" type="switch" label="修改密码" place-holder="是否修改"></txt-input>-->
                <!--                <txt-input v-if="changePaw" v-model="tem.password" type="password" label="新密码6位"-->
                <!--                           place-holder="新密码"></txt-input>-->
                <!--                <txt-input v-if="changePaw" v-model="tem.repaw" type="password" label="重复"-->
                <!--                           place-holder="重复密码"></txt-input>-->
                <!--                <txt-input @click.native="showDefault" v-model="tem.courseName" :disabled="true"  label="开课班" place-holder="选择班"></txt-input>-->
                <!--                <cube-textarea placeholder="备注" class="area" v-model="tem.remark"></cube-textarea>-->
                <!--                <txt-input v-model="tem.remark" label="备注" place-holder="备注"></txt-input>-->
            </div>
            <radius-btn @click.native="confirm" txt="完成" style="margin-top: 0.4rem;background-color:#00A398;"></radius-btn>


        </div>

        <div class="qr_code" v-if="!showEdit">
            <span class="remark">绑定成功长按二维码进入商城</span>
            <img :src="qrCode" alt="">
        </div>

    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import txtInput from "@/components/base/txt-input"
    import radiusBtn from "@/components/base/radius-btn"
    import {update, getCode} from "../../api/user";
    import * as Dialog from '@/dialog'
    import * as Toast from '@/toast'

    export default {
        name: "edit",
        components: {
            txtInput, radiusBtn,formHeader
        },
        activated() {
            this.tem.phone = this.$route.query.mobile
            this.tem.name = this.$route.query.name
            this.tem.topPhone = this.$route.query.topMobile
            this.back = this.$route.query.back
            //同步
            this.tem.sync = this.$route.query.sync
            let reg = /^(\d{3})\d{4}(\d{4})$/
            this.topPhone = this.tem.topPhone.replace(reg, "$1****$2")
        },
        methods: {
            clickCode() {
                if (!this.tem.phone || this.tem.phone.length != 11) {
                    Toast.showInfo("请输入正确的手机号码!")
                    return
                }
                getCode(this.tem.phone).then(res => {
                    this.captcha = res.data
                })
            },
            confirm() {
                if (!this.tem.phone) {
                    Toast.showInfo("请输入手机号码!")
                    return
                }
                // if (!this.tem.name) {
                //     Toast.showInfo("请输入姓名!")
                //     return
                // }
                if (!this.tem.captcha) {
                    Toast.showInfo("请输入正确的验证码"+this.tem.captcha)
                    return;
                }
                if(this.tem.captcha != this.captcha){
                    Toast.showInfo("请输入正确的验证码!")
                    return;
                }
                if (this.changePaw && !this.tem.password) {
                    Toast.showInfo("请输入新密码!")
                    return;
                }
                if (this.changePaw && this.tem.password.length < 6) {
                    Toast.showInfo("密码必须6位!")
                    return;
                }
                if (this.changePaw && !this.tem.repaw) {
                    Toast.showInfo("请重复密码!")
                    return;
                }
                if (this.changePaw && this.tem.repaw != this.tem.password) {
                    Toast.showInfo("两次密码不同!")
                    return;
                }
                if (this.topPhone.indexOf('*')<0){
                    this.tem.topPhone = this.topPhone
                }

                update(this.tem).then(res => {
                    Dialog.showCorrect("操作成功!").then(() => {
                        if (this.back) {
                            this.$router.replace('/my')
                        } else {
                            this.showEdit = false
                        }
                    })
                })
            }
        },
        data() {
            return {
                user: {
                    name: null,
                    mobile: null
                },
                back: false,
                showEdit: true,
                qrCode: process.env.VUE_APP_WX_QR,
                captcha: null,
                txt: null,
                changePaw: false,
                tem: {
                    phone: '',
                    topPhone:'',
                    name: '',
                    captcha: '',
                    password: '',
                    repaw: '',
                    sync: false
                },
                topPhone:''
            }
        }
    }
</script>

<style scoped lang="stylus">
    .my-edit
        z-index 2
        background url("~@/assets/helfcirindex.png") no-repeat $page-bg
        background-size 100% auto
        height 100%
        width 100%
        margin-top 46px
        .con
            padding 10px 10px 0px 10px

        .qr_code
            height 100%
            position absolute
            top 0
            left 0
            right 0
            display flex
            flex-direction column
            align-items center
            justify-content flex-start

            span
                margin-top 20px
                font-size 16px
                color $font-color-deep
                margin-bottom 20px

            img
                width 100%
        /deep/.radius-btn
            background-color #00A398!important
        /deep/.txt-input
            /deep/.code-btn
                /deep/.second
                    color #00A398


</style>